<template>
  <el-dialog :title="dialogTitle" draggable v-model="dialogVisible" width="1000px">
    <el-tabs v-model="dialogTabActiveName" class="demo-tabs" @tab-click="tanClick">
      <el-tab-pane label="基础信息" name="base">
        <el-form ref="formRef" :model="formData" :rules="formRules" v-loading="formLoading" label-width="140px">
          <el-form-item label="使用单位名称">
            <el-input v-model="formData.usingUnityName" disabled style="width: 300px" maxlength="100" />
          </el-form-item>
          <div class="flex-v">
            <el-form-item label="使用单位代码" style="margin-left: 0px;">
              <el-input v-model="formData.usingUnityCode" style="width: 300px" maxlength="20" />
            </el-form-item>
            <el-form-item label="登记注册机构" style="margin-left: 0px;">
              <el-input v-model="formData.registerName" style="width: 300px" maxlength="100" />
            </el-form-item>
          </div>
          <div class="flex-v">
            <el-form-item label="设备注册代码" style="margin-left: 0px;">
              <el-input v-model="formData.registrationCode" style="width: 300px" maxlength="100" />
            </el-form-item>
            <el-form-item label="使用登记号" prop="useRegistrationCode" style="margin-left: 0px;">
              <el-input v-model="formData.useRegistrationCode" style="width: 300px" maxlength="20" />
            </el-form-item>
          </div>
          <div class="flex-v">
            <el-form-item label="设备类别" prop="categoryName" style="margin-left: 0px;">
              <el-select v-model="formData.categoryName" @focus="getCategoryType" clearable placeholder="请选择"
                style="width: 300px" maxlength="100">
                <el-option v-for="item in optionsCategory" :key="item.id" :label="item.name" :value="item.name" />
              </el-select>
            </el-form-item>
            <el-form-item label="设备编码" style="margin-left: 0px;">
              <el-input v-model="formData.code" style="width: 300px" maxlength="20" />
            </el-form-item>
          </div>
          <div class="flex-v">
            <el-form-item label="设备名称" style="margin-left: 0px;">
              <el-input v-model="formData.name" style="width: 300px" maxlength="100" />
            </el-form-item>
            <el-form-item label="设备种类" prop="className" style="margin-left: 0px;">
              <el-select v-model="formData.className" @focus="getClassType" clearable placeholder="请选择"
                style="width: 300px" maxlength="100">
                <el-option v-for="item in optionsClass" :key="item.id" :label="item.name" :value="item.name" />
              </el-select>
            </el-form-item>
          </div>
          <div class="flex-v">
            <el-form-item label="设备状态" prop="productStatus" style="margin-left: 0px;">
              <el-select v-model="formData.productStatus" clearable placeholder="请选择" style="width: 300px">
                <el-option label="正常" :value="1" />
                <el-option label="停用" :value="0" />
              </el-select>
            </el-form-item>
            <el-form-item label="设备品种" prop="varietyName" style="margin-left: 0px;">
              <el-select v-model="formData.varietyName" @focus="getVarietyType" clearable placeholder="请选择"
                style="width: 300px" maxlength="100">
                <el-option v-for="item in optionsVariety" :key="item.id" :label="item.name" :value="item.name" />
              </el-select>
            </el-form-item>
          </div>
          <div class="flex-v">
            <el-form-item label="安全管理员" style="margin-left: 0px;">
              <el-input v-model="formData.safetyUserName" style="width: 300px" maxlength="100" />
            </el-form-item>
            <el-form-item label="设备型号" style="margin-left: 0px;">
              <el-input v-model="formData.productIdentifier" style="width: 300px" maxlength="20" />
            </el-form-item>
          </div>
          <div class="flex-v">
            <el-form-item label="维护保养单位" style="margin-left: 0px;">
              <el-input v-model="formData.maintenanceUnity" style="width: 300px" maxlength="100" />
            </el-form-item>
            <el-form-item label="单位内部编号" style="margin-left: 0px;">
              <el-input v-model="formData.unityIdentifier" style="width: 300px" maxlength="20" />
            </el-form-item>
          </div>
          <el-form-item label="设备使用地址" prop="province" style="margin-left: 0px;">
            <div class="flex-v">
              <choose-area @change="changeArea" :province="formData.province" :city="formData.city"
                :area="formData.district" />
              <el-input v-model="formData.street"
                :disabled="!formData.province || !formData.city || !formData.district" style="width: 180px"
                maxlength="20" />
            </div>
          </el-form-item>
          <div class="flex-v">
            <el-form-item label="是否增设电梯" prop="isAdd" style="margin-left: 0px;">
              <el-radio-group v-model="formData.isAdd" style="width: 300px">
                <el-radio :label="1" value="1">是</el-radio>
                <el-radio :label="0" value="0">否</el-radio>
              </el-radio-group>
            </el-form-item>
          </div>
        </el-form>
      </el-tab-pane>
      <el-tab-pane label="参数信息" name="params">
        <!-- <el-form label-width="140px" disabled>
          <div class="flex-v">
            <el-form-item label="额定载重" style="margin-left: 0px;">
              <el-input v-model="deviceInfo.entName" style="width: 300px" maxlength="10">
                <template #append>kg</template>
              </el-input>
            </el-form-item>
            <el-form-item label="额定速度" style="margin-left: 0px;">
              <el-input v-model="deviceInfo.user" style="width: 300px" maxlength="20">
                <template #append>m/s</template>
              </el-input>
            </el-form-item>
          </div>
          <div class="flex-v">
            <el-form-item label="电梯层数" style="margin-left: 0px;">
              <el-input v-model="deviceInfo.entName" style="width: 300px" maxlength="20" />
            </el-form-item>
            <el-form-item label="电梯站数" style="margin-left: 0px;">
              <el-input v-model="deviceInfo.user" style="width: 300px" maxlength="20" />
            </el-form-item>
          </div>
          <div class="flex-v">
            <el-form-item label="电梯门数" style="margin-left: 0px;">
              <el-input v-model="deviceInfo.entName" style="width: 300px" maxlength="20" />
            </el-form-item>
            <el-form-item label="控制方式" style="margin-left: 0px;">
              <el-input v-model="deviceInfo.user" style="width: 300px" maxlength="20" />
            </el-form-item>
          </div>
          <div class="flex-v">
            <el-form-item label="是否斜行电梯" style="margin-left: 0px;">
              <el-input v-model="deviceInfo.entName" style="width: 300px" maxlength="20" />
            </el-form-item>
            <el-form-item label="斜行电梯-倾斜角" style="margin-left: 0px;">
              <el-input v-model="deviceInfo.user" style="width: 300px" maxlength="20">
                <template #append>°</template>
              </el-input>
            </el-form-item>
          </div>
          <div class="flex-v">
            <el-form-item label="轿门位置" style="margin-left: 0px;">
              <el-input v-model="deviceInfo.entName" style="width: 300px" maxlength="20" />
            </el-form-item>
          </div>
        </el-form> -->
      </el-tab-pane>
    </el-tabs>
    <template #footer>
      <span class="dialog-footer">
        <el-button @click="dialogVisible = false">取消</el-button>
        <el-button type="primary" v-if="dialogTabActiveName == 'base'" @click="submitForm">确认</el-button>
      </span>
    </template>
  </el-dialog>
</template>

<script setup>
import { apiGetDeviceDetails, GetDeviceClassList, GetDeviceCategoryList, GetDeviceVarietyList, apiGetDeviceUpdate } from "@/api/device";
import chooseArea from "@/components/chooseArea";
import { ref } from "vue";
const dialogVisible = ref(false)
const dialogTitle = ref('设备信息')
const formLoading = ref(false)
const formRef = ref()
const formData = ref({})
const deviceInfo = ref({})
const dialogTabActiveName = ref('base')
const optionsClass = ref([])
const optionsCategory = ref([])
const optionsVariety = ref([])
const ids = ref()
const { proxy } = getCurrentInstance()
const formRules = reactive({
  categoryName: [{ required: true, message: '请选择', trigger: 'blur' }],
  className: [{ required: true, message: '请选择', trigger: 'blur' }],
  varietyName: [{ required: true, message: '请选择', trigger: 'blur' }],
  province: [{ required: true, message: '请选择', trigger: 'blur' }],
  useRegistrationCode: [{ required: true, message: '请选择', trigger: 'blur' }]
})

/** 打开弹窗 */
const open = async (id) => {
  dialogVisible.value = true
  resetForm()
  formLoading.value = true;
  ids.value = id
  apiGetDeviceDetails(id).then(res => {
    formLoading.value = false;
    if (res.data) {
      formData.value = res.data
    }
  }).catch(err => {
    formLoading.value = false;
    formData.value = [];
  });
}
defineExpose({ open })

/** 种类下拉框 */
const getClassType = () => {
  GetDeviceClassList().then(res => {
    if (res.data) {
      optionsClass.value = res.data
    }
  }).catch(err => { });
};

/** 类别下拉框 */
const getCategoryType = () => {
  GetDeviceCategoryList().then(res => {
    if (res.data) {
      optionsCategory.value = res.data
    }
  }).catch(err => { });
};

/** 品种下拉框 */
const getVarietyType = () => {
  GetDeviceVarietyList().then(res => {
    if (res.data) {
      optionsVariety.value = res.data
    }
  }).catch(err => { });
};

/** 城市 */
const changeArea = (value) => {
  formData.value.province = value.province
  formData.value.city = value.city
  formData.value.district = value.area
}

/** 提交表单 */

const emit = defineEmits(['success'])
const submitForm = async () => {
  // 校验表单
  if (!formRef) return
  const valid = await formRef.value.validate()
  if (!valid) return
  // 提交请求
  formLoading.value = true
  optionsClass.value.map((v) => {
    if (formData.value.className === v.name) {
      formData.value.classId = v.id
    }
  })
  optionsCategory.value.map((v) => {
    if (formData.value.categoryName === v.name) {
      formData.value.categoryId = v.id
    }
  })
  optionsVariety.value.map((v) => {
    if (formData.value.varietyName === v.name) {
      formData.value.varietyId = v.id
    }
  })
  formData.value.id = ids
  console.log(formData.value, '222');
  apiGetDeviceUpdate(formData.value).then(res => {
    formLoading.value = false;
    proxy.$modal.msgSuccess("操作成功");
    dialogVisible.value = false;
    emit('success') // 回调
  }).catch(err => {
    formLoading.value = false
  })
}

/** 重置表单 */

const resetForm = () => {
  formData.value = {
    usingUnityName: undefined,
    usingUnityCode: undefined,
    registerName: undefined,
    registrationCode: undefined,
    useRegistrationCode: undefined,
    categoryName: undefined,
    code: undefined,
    name: undefined,
    className: undefined,
    productStatus: undefined,
    productIdentifier: undefined,
    safetyUserName: undefined,
    usingAddress: undefined,
    usingAddress: undefined,
    productIdentifier: undefined,
    installAddress: undefined,
    varietyName: undefined,
    province: undefined,
    isAdd: undefined,
    maintenanceUnity: undefined,
  }
  formRef.value?.resetFields()
}

</script>
<!-- <style lang="scss" scoped>
.area-select.large {
  width: 100%;
  line-height: 20px;
}
</style> -->

